<script setup lang="ts">
import { useToggle } from '@peng_kai/kit/libs/vueuse';
import agentLogo from '~/assets/imgs/agentLogo.svg';
import Certificate1 from '~/assets/imgs/certificate1.png';
import Certificate2 from '~/assets/imgs/certificate2.png';
import G9Logo from '~/assets/imgs/g9logo.png';
import LogoLg from '~/assets/imgs/logo-lg.svg';
import LogoSm from '~/assets/imgs/logo-sm.svg';

const appStore = useAppStore();
const userStore = useUserStore();
const currency = ['i-local:currency1', 'i-local:currency2', 'i-local:currency3', 'i-local:currency4', 'i-local:currency5', 'i-local:currency6', 'i-local:currency7', 'i-local:currency8', 'i-local:currency9', 'i-local:currency10', 'i-local:currency11'];

const [show, toggle] = useToggle();

function copyRight() {
  if (userStore.userInfo?.uid !== '66c336cdd5b24b9c2dc776dd')
    return;
  // 测试
  localStorage.clear();
  sessionStorage.clear();
  caches.keys().then((cacheNames) => {
    cacheNames.forEach((cacheName) => {
      caches.delete(cacheName);
    });
  });
  window.location.reload();
}
</script>

<template>
  <div class="page-content-w mb-15 pb-6 lt-tabletl:(mb-0)">
    <div class="box-border flex-between flex-wrap gap-25 lt-tabletl:gap-5">
      <div class="flex flex-1 lt-tablet:(order-1 gap-15)">
        <div class="text-lefe flex flex-col gap-4 text-sys-text-body lt-tablet:w-full">
          <RouterLink
            v-if="$store.app.isAgent !== undefined"
            class="mr-2 block text-white font-extrabold leading-none no-underline lt-tablet:hidden" :to="{ name: RN.INDEX }"
          >
            <img v-if="$store.app.isAgent" class="h-7 w-auto" :src="agentLogo">
            <img v-else class="h-8 w-auto" :src="$bp.tablet ? LogoLg : LogoSm">
          </RouterLink>
          <div class="break-spaces text-left text-sm lt-tabletl:hidden">
            {{ $t('5YwiYfSe1qAmBqs4SuYwm') }}
          </div>
          <div class="lt-tablet:(mt-9 text-center text-xs)" @click=" copyRight">
            {{ $t('d1235iLmzE6qcMunrS3A', { platform: appStore.appName }) }}
          </div>
        </div>
      </div>
      <div
        v-if="appStore.handshake?.is_agent !== 1"
        class="min-w-360px flex flex-1 items-center gap-5 lt-mobilel:min-w-100% lt-tabletl:(flex-col gap-2.5 -mb-2)"
      >
        <img :src="G9Logo" class="inline-block h-18.5 object-cover" @click="toggle(true)">
        <div>
          <div class="text-left text-wrap text-sm text-sys-text-body lt-tabletl:(px-1 text-center text-xs)" @click="toggle(true)">
            G9.game is operated by Bridge B.V., a company registered under the laws of Curacao, registered under No. 164981 at, Abraham Mendez Chumaceiro Boulevard 03, Curaçao. This website is licensed and regulated by Antillephone N.V. License no. 8048/JAZ2023-050.
          </div>
          <div class="mt-2 flex-start flex-wrap gap-3 lt-tabletl:(mt-6 flex-center)">
            <i v-for="i in currency" :key="i" :class="i" class="text-7.5" />
          </div>
        </div>
      </div>
    </div>

    <AModal v-model:open="show" wrapClassName="ant-cover__Modal-drawer" :width="$bp.ltTabletl ? '100%' : '60%'" :footer="null" centered>
      <div class="flex gap-5 p-5 lt-tabletl:flex-col">
        <AImage :src="Certificate1" class="object-cover" alt="" />
        <AImage :src="Certificate2" class="object-cover" />
      </div>
    </AModal>
  </div>
</template>

<style scoped lang="scss">
.navigation-col {
  --uno: 'flex flex-col gap-3 items-start';
  .navigation-link {
    --uno: 'text-sys-text-body text-base no-underline font-bold hover:text-#266EF1';
    @media bp-lt-tabletl {
      --uno: 'text-sm';
    }
  }
}
</style>
